<include file="Common/nav" current="movie"/>
<div class="container">
  <div class="mycontent">
    <div class="page-header"><h3 class="header-line">{$data.name}</h3></div>
    <div class="row">
      <div class="col-xs-6 col-sm-3">
        <div class="div-thumbnail">
          <img <notempty name="data.poster"> src="{$data['poster']}" <else/> data-src="holder.js/220x320" </notempty> alt="{data['poster']}" />
          <div class="caption" style="margin-top:1em;">
            <dl class="dl-horizontal">
              <!-- name -->
              <dt>name</dt>
              <dd>{$data.name}</dd>
              <!-- aka -->
              <dt><if condition="in_array('aka',$data['imdb_field'])">
                    <if condition="in_array('aka', $data['dbpedia_field'])"><span class="label label-success pull-left">ID</span>
                    <else/><span class="label label-primary pull-left">IM</span>
                    </if>
                  <else/>
                    <if condition="in_array('aka', $data['dbpedia_field'])"><span class="label label-default pull-left">DB</span>
                    </if>
                  </if>aliases</dt>
              <dd>
              <ul class="list-unstyled">
                <?php $_aka = array_slice(explode(',',$data['aka']),0,3); ?>
                <foreach name="_aka" item="it">
                <li>{$it}</li>
                </foreach>
              </ul>
              </dd>
              <!-- movie genres -->
              <dt>genres<dt>
              <dd>
              <ul class="list-unstyled">
                <volist name="data.genres" id="it">
                <li><a href="{:U('genre/'.$it['name'])}">{$it.name}</a></li>
                </volist>
              </ul>
              </dd>
              <!-- movie credits -->
              <dt><if condition="in_array('occupation',$data['imdb_field'])">
                    <if condition="in_array('occupation', $data['dbpedia_field'])"><span class="label label-success pull-left">ID</span>
                    <else/><span class="label label-primary pull-left">IM</span>
                    </if>
                  <else/>
                    <if condition="in_array('occupation', $data['dbpedia_field'])"><span class="label label-default pull-left">DB</span>
                    </if>
                  </if>credits</dt>
              <dd>
              <ul class="list-unstyled">
                <?php $_occupy = explode(',',$data['occupation']); ?>
                <foreach name="_occupy" item="it">
                <li>{$it}</li>
                </foreach>
              </dd>
              <!-- birth -->
              <dt><if condition="in_array('birthdate',$data['imdb_field'])"><span class="label label-primary pull-left">IM</span><else/><span class="label label-default pull-left">DB</span></if>born</dt>
              <dd><notempty name="data.birthdate">{:strftime('%b %e, %Y', strtotime($data['birthdate']))}</notempty><dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-8">
        <ul class="nav nav-tabs" id="mytab">
          <li class="active"><a href="#resume" data-toggle="tab"><b>RESUME</b></a></li>
          <li><a href="#filmography" data-toggle="tab"><b>FILMOGRAPHY</b></a></li>
        </ul>
        <div class="tab-content" id="mytabcontent">
          <div class="tab-pane fade in active" id="resume">
            <h3><b>Resume</b><if condition="in_array('resume',$data['imdb_field'])"><span class="label label-primary pull-right">IM</span><else/><span class="label label-default pull-right">DB</span></if></h3>
            <p>{$data.resume}</p>
          </div>
          <div class="tab-pane fade" id="filmography">
            <h3><b>Filmography</b><button type="button" class="btn btn-default pull-right" data-toggle="modal" data-target="#timeline-modal">Timeline!</button><button type="button" class="btn btn-default pull-right" data-toggle="modal" data-target="#radar-modal" style="margin-right:1em;">RadarChart!</button></h3>
            <div class="table-responsive">
              <table class="table table-striped table-hover listing-table">
                <thead>
                  <tr>
                    <th>Title</th>
                    <th></th>
                    <th>Year</th>
                    <th>Rating</th>
                  </tr>
                </thead>
                <tbody>
                <volist name="data.movies" id="it">
                <tr>
                  <td><img class="img-thumbnail" <notempty name="it.poster"> src="{$it.poster}" <else/> data-src="holder.js/50x70" </notempty> style="width:50px;height:75px;"/></td>
                  <td class="title">
                    <strong><a href="{:U('movie/'.$it['id'])}">{$it.title}</a></strong>
                    <p>{$it.relation}</p>
                  </td>
                  <td class="year"><notempty name="it.releasedate">{:explode('-', $it['releasedate'])[0]}</notempty></td>
                  <td class="rating">
                    <for start="$it['rating']/2|floor" end="0" step="-1" comparison="gt">
                    <span class="glyphicon glyphicon-star"></span>
                    </for>
                    <gt name="it['rating']%2" value="0">
                    <span class="glyphicon glyphicon-star-empty"></span>
                    </gt>
                    <if condition="$it['imdb']">
                      <if condition="$it['dbpedia']"><span class="label label-success pull-right">ID</span>
                      <else/><span class="label label-primary pull-right">IM</span>
                      </if>
                    <else/>
                      <if condition="$it['dbpedia']"><span class="label label-default pull-right">DB</span>
                      </if>
                    </if>
                  </td>
                </tr>
                </volist>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Timeline Modal -->
<div class="modal fade" id="timeline-modal" tabindex="-1" role="dialog" aria-labelledby="timeline-title" aria-hidden="true">
  <div class="modal-dialog" style="width:70%;height:700px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="timeline-title">{$data['name']}</h4>
      </div>
      <div class="modal-body" id="timeline-body">
      </div>
    </div>
  </div>
</div>
<!-- Radarchart Modal -->
<div class="modal fade" id="radar-modal" tabindex="-1" role="dialog" aria-labelledby="radar-title" aria-hidden="true">
  <div class="modal-dialog" style="width:60%;height:500px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="timeline-title">{$data['name']}</h4>
      </div>
      <div class="modal-body row">
        <div class="col-md-3">
          <img src="{$data['poster']}" alt="{data['poster']}" class="img-thumbnail" style="margin-top:3.5em;margin-left:5em;"/>
        </div>
        <div class="col-md-6" style="margin-left:5em;">
          <div id="radar-body" style="width:600px;height:400px;"></div>
        </div>
      </div>
    </div>
  </div>
</div>
